<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="修改登录密码" name="first">
      <el-row class="loginPwd">
        <div class="flex sec">
          <span>输入旧登录密码：</span>
          <el-input  v-model="form1.checkPassword" type="password" placeholder="请输入旧密码"></el-input>
        </div>
        <div class="flex sec">
          <span>输入新登录密码：</span>
          <el-input  v-model="form1.password" type="password" placeholder="请输入新密码"></el-input>
        </div>
        <div class="flex sec">
          <span>确认新登录密码：</span>
          <el-input v-model="password" type="password" placeholder="请再次输入新密码"></el-input>
        </div>
        <div style="color: red;">备注：请妥善保管好您的登录密码，如遗忘请联系在线客服重置。</div>
        <el-row style="padding:10px 120px">
          <el-button type="primary" @click="revisePwd(1)">修改</el-button>
          <!--<el-button type="primary">重置</el-button>-->
        </el-row>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="修改资金密码" name="second">
      <el-row class="loginPwd">
        <div class="flex sec">
          <span>输入旧资金密码：</span>
          <el-input  v-model="form2.checkDrawPass" type="password" placeholder="请输入旧密码"></el-input>
        </div>
        <div class="flex sec">
          <span>输入新资金密码：</span>
          <el-input  v-model="form2.drawPass" type="password" placeholder="请输入新密码"></el-input>
        </div>
        <div class="flex sec">
          <span>确认新资金密码：</span>
          <el-input v-model="password2" type="password" placeholder="请再次输入新密码"></el-input>
        </div>
        <div style="color: red;">备注：请妥善保管好您的资金密码，如遗忘请联系在线客服重置。</div>
        <el-row style="padding:10px 120px">
          <el-button type="primary" @click="revisePwd(2)">修改</el-button>
          <!--<el-button type="primary">重置</el-button>-->
        </el-row>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import md5 from 'md5'
  export default {
    data () {
      return {
        activeName: 'first',
        password: undefined,
        password2: undefined,
        form1: {
          checkPassword: '',
          password: ''
        },
        form2: {
          checkDrawPass: '',
          drawPass: ''
        }
      }
    },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      },
      revisePwd (mes) {
        let params = {}
        if (mes === 1) {
          Object.assign(params, this.form1)
          params.checkPassword = md5(params.checkPassword)
          params.password = md5(params.password)
        }
        if (mes === 2) {
          Object.assign(params, this.form2)
          params.checkDrawPass = md5(params.checkDrawPass)
          params.drawPass = md5(params.drawPass)
        }
        this.$api.revisePwd(params).then(res => {
          if (res.code === '000000') {
            this.$message.success('修改成功')
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>
  .loginPwd{
    width: 700px;
    margin: auto;
    border:1px solid #ccc;
    padding: 70px 12px 70px 80px;
    text-align: left;
  }
  .sec{
    line-height: 40px;
    height:40px;
    margin-bottom: 12px;
  }
  .sec span{
    font-size: 14px;
  }
  .sec .el-input{
    width: 260px;
  }
</style>
